<template>
    <div>
        <el-table
            :data="employee.list.list"
            v-loading="employee.list.loading"
            class="my-table"
        >
            <el-table-column label="姓名" prop="name" />
            <el-table-column label="部门" prop="department" />
            <el-table-column label="入职时间" prop="hiredate" />
            <el-table-column label="职级" prop="level" />
            <el-table-column>
                <template
                    slot-scope="scope"
                >
                    <el-button 
                        size="mini" 
                        @click="handleUpdate(scope)"
                    >Edit</el-button>
                    <el-button 
                        size="mini" 
                        type="danger" 
                        @click="handleDel(scope)"
                    >Delet</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>

import { mapState } from 'vuex'

    export default {
        created () {
            console.log(this.$store)
            this.$store.dispatch('get')
        },
        computed: {
            ...mapState({
                employee: state => state.employee
            })
        },
        methods: {
            handleDel(data) {
                this.$store.dispatch('del', data.row)
            },
            handleUpdate(data) {
                console.log(data);
                this.$router.push(`/dashboard/setting?id=${data.row.id}`)
            }
        },
    }
</script>

<style lang="css" scoped>
    .my-table{
        width: 1170px;
        padding: 10px;
        margin: 0 auto;
        background: #fff;
    }
</style>